<template>
    <div>
        <van-nav-bar  @click-left="backRoute" left-arrow  title="编辑资料"/>
        <van-cell-group>

            <van-field label="姓名：" placeholder="请输入姓名" v-model="myFormData.realname" />
            <van-field label="头像：" center class="avatar" @click="seenChange">
                <template #right-icon>
                    <app-uploader
                            class="upload"
                            v-model="Avatar"
                            accept="image"
                            :multiple="false"
                            deletable
                    >
                    </app-uploader>
                 <!--   <van-icon
                            v-if="avatarSeen"
                            class="iconStyle"
                            :name="myFormData.avatar"
                            size="5rem"
                    />-->
                </template>
            </van-field>
            <van-field label="用户名：" v-model="myFormData.username" placeholder="请输入别名" readonly />

            <app-select label="性别：" v-model="myFormData.sex" :placeholder="myFormData.sex" :dict="sex_type"></app-select>

            <app-date
                      label="生日："
                      v-model="myFormData.birthday"
                      type="date"
                      :placeholder="myFormData.birthday"
                      :min-date="miniDate"
            />
        </van-cell-group>

        <van-cell-group class="cell-margin">
            <van-field readonly label="所在部门：" v-model="myFormData.orgCode" placeholder="请选择部门"/>
            <van-field readonly label="工号：" v-model="myFormData.workNo" />

        </van-cell-group>

        <van-cell-group class="cell-margin">
            <van-field label="手机：" v-model="myFormData.phone" placeholder="请输入手机"/>

            <van-field label="邮箱：" v-model="myFormData.email" placeholder="请输入邮箱"/>
        </van-cell-group>

        <div style="width: 100%;text-align: center;padding-top:15px " v-if="!disabled">
            <van-button
                    block
                    type="info"
                    style="width: 99%;margin: 0 auto;font-size:18px"
                    @click="onSubmit"
                    :loading="loading">
                提  交
            </van-button>
        </div>

    </div>
</template>

<script>
    const sex_type = [{text:'男',value:'1'},{text:'女',value:'2'}];

    import appSelect from '@/components/appSelect'
    import { putAction } from '@/api'
    import AppUploader from '@/components/AppUploader'
    import AppDate from '@/components/AppDate'
    export default {
        name: "personalEdit",
        components:{
          appSelect,AppUploader,AppDate
        },
        data() {
            return {
                sex_type,
                avatarSeen:true,
                miniDate: new Date(1970, 0, 1),
                Avatar:'',
                myFormData:{
                    avatar:'',
                    realname:'',
                    username:'',
                    sex:1,
                    birthday:'',
                    orgCode:'',
                    workNo:'',
                    phone:'',
                    email:'',
                    id:'',
                },
                loading: false,
            }
        },
        computed:{
            disabled(){
                if(!this.formData){
                    return false;
                }
                if(this.formData.disabled === true){
                    return true
                }else{
                    return false
                }
            }
        },
        created() {
            this.myFormData = this.$route.params;
            if(this.myFormData.sex=='女'){
              this.myFormData.sex = '2'
            }else if(this.myFormData.sex=='男'){
              this.myFormData.sex = '1'
            }
            if(this.myFormData.identity=='普通成员'){
              this.myFormData.identity = 1
            }else if(this.myFormData.identity=='上级'){
              this.myFormData.identity = 2
            }
            if(this.myFormData.status=='正常'){
              this.myFormData.status = 1
            }else if(this.myFormData.status=='冻结'){
              this.myFormData.status = 2
            }
            const path=this.myFormData.avatar
            const parts = path.split('/');
            this.Avatar = parts[parts.length - 1];

            Object.keys(this.myFormData).map(key=>{
              if(this.myFormData[key]=='无'){
                this.myFormData[key] = ''
              }
            })
            console.log("per",this.myFormData )
        },
        methods:{
            backRoute(){
                this.$router.push({name: 'personalDetails'})
            },
            seenChange(){
                console.log(123)
                this.avatarSeen = false
                this.myFormData.avatar = this.Avatar

            },
            onSubmit() {
              let myForm = this.myFormData
              let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
              let checkEmail = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
              console.log("myForm",myForm)
              if(!myForm.phone || myForm.phone.length==0){
                this.$toast('请输入手机号');
                return false
              }
              if(!checkPhone.test(myForm.phone)){
                this.$toast('请输入正确的手机号');
                return false
              }
              if(!checkEmail.test(myForm.email)){
                this.$toast('请输入正确的邮箱地址');
                return false
              }
                this.myFormData.id = this.$store.getters.userid
                this.myFormData.avatar = this.Avatar
                console.log('myform',this.myFormData)
                this.loading = true;
                putAction('/sys/user/appEdit',this.myFormData).then(res=>{

                    console.log(res)
                    this.loading = false
                    if (res.success){
                        this.$toast('提交成功')
                        this.$router.push({name: 'personalDetails',params:{...this.myFormData}})
                    }
                }).catch(()=>{
                    this.loading = false
                    this.$toast('提交失败')
                });
            }
        }
    }
</script>

<style scoped>
    .cell-margin{margin-top: 0.8rem}
    .avatar{
        width: 100%;
        height: 5rem;
        position: relative;
        margin-bottom:5px
    }
    .iconStyle{
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin-left: -1rem;
        margin-top: -1rem;
        width: 4rem;
        height: 5rem;
        pointer-events:none;
    }
    .upload{
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        margin-left: -1rem;
        margin-top: -1rem;
        width:4rem;
        height: 5rem;
    }
</style>
